<!-- 售后服务 -->
<template>
	<view class="sale">
		<view class="content">
			<!-- 单选 -->
			<view class="label_list">
				<view class="label_card" v-for="(item,index) in name_list" :key="item.id">
					<view class="label_name" @click="changLable(item,index)" :class="index === active ? 'changeStyle' : 'changeStyle1'">{{item.name}}</view>
				</view>
			</view>
			<view class="main">
				<view class="title">反馈内容</view>
				<view class="middle pr">
					<textarea class="middle_span" placeholder="请输入使用过程中遇到的问题或者对我们的建议…" maxlength="88" v-model="desc"
					@input="descInput">
					</textarea>
					<view class="middle_num pa">{{remnant}}/88</view>
				</view>
			</view>
			<view class="button tc" @tap="submit">
				{{btn}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
    import mixins from '@/common/mixins.js';
	export default {
        mixins:[mixins],
		data() {
			return {
				btn: "提交",   // 提交按钮
				name_list: [{ //  反馈列表 
						id: 0,
						selected: false,
						name: "功能建议"
					}, {
						id: 1,
						selected: false,
						name: "异常反馈"
					}, {
						id: 2,
						selected: false,
						name: "BUG反馈"
					},
					{
						id: 3,
						selected: false,
						name: "内容建议"
					}, {
						id: 4,
						selected: false,
						name: "界面建议"
					}, {
						id: 5,
						selected: false,
						name: "其他"
					},
				],
				desc: '', // 反馈内容
				remnant:0, // 计算数字的变量结束
				active: -1, // 下标
				obj: { // obj 提交对象
					shop_id: '',
					member_id: 1,
					type: '',
					description: ''
				},
				rule: { // 正则判断
					description: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请输入反馈意见",
						}, ],
					},
					type: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请选择反馈类型",
						}, ],
					},

				},
			};
		},
		onLoad() {
			// 页面加载获取店铺id
			this.obj.shop_id= Number(this.$Route.query.id);
		},
		methods: {
			// 计算数字开始
			descInput() {
				let txtVal = this.desc.length
				this.remnant = txtVal
			},
			// 提交请求
			submit() {
				this.obj.description = String(this.desc)
				let status = this.$tools.verification(this.obj, this.rule)
				if(!status.status) return;
				this.$api('shopfeedback',this.obj).then(res => {
					if(res.status) {
						this.$tools.toast('反馈意见成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						},1000)
					}
					this.$store.dispatch('sellers/get_feedback',this.obj)
				})
			},
			//选择反馈内容
			// 多选
			select_button(item, index) {
				this.name_list[index].selected = !this.name_list[index].selected
				return this.name_list[index].selected
			},
			// 单选
			changLable(item, index) {
				if (this.active === index) {
					return
				} else {
					this.active = index;
				}
				this.obj.type = item.name 
			},
			
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
